/* eslint-disable */
<template>
	<!-- 分配角色权限 -->
	<el-dialog class="handleDialog" :title="title" :visible.sync="show" width="60%" :close-on-click-modal="false" @close="closeDiolag">
		<el-row>
			<el-form :rules="rules" :inline="false" :model="roleForm" ref="roleForm" label-width="110px">
				<p><span style="font-weight:bold;">{{$t('components.handleRole.step1')}}：</span>{{$t('components.handleRole.selectByAccountTip')}}</p>
				<el-row>
					<el-col :span="12">
						<el-form-item :label="$t('common.byUserName')+':'" prop="userName">
							<el-select v-model="roleForm.userName" filterable :placeholder="$t('common.selectPlaceholder')" :filter-method="byAccountOptionsFun">
								<el-option @click.native="handleSelectByForm(item)" v-for="item in byAccountOptions" :key="item.code" :label="item.label" :value="item.code">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('common.empName')+':'" prop="empName">
							<el-input disabled v-model="roleForm.empName" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('common.positionName')+':'" prop="positionName">
							<el-input disabled v-model="roleForm.positionName" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('common.orgName')+':'" prop="orgName">
							<el-input disabled v-model="roleForm.orgName" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<p><span style="font-weight:bold;">{{$t('components.handleRole.step2')}}：</span>{{$t('components.handleRole.selectRole')}}</p>
				<el-row>
					<el-col :span="8">
						<el-form-item :label="$t('common.subsysName')+':'" prop="subsysName">
							<el-select v-model="roleForm.subsysName" :placeholder="$t('common.selectPlaceholder')">
								<el-option @click.native="handleSelectSubsys(item)" v-for="(item,index) in subsysTemOptions" :key="index" :label="item.label" :value="item.label"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('common.roleName')+':'">
							<el-input v-model="roleForm.roleName" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" style="text-align: right;">
						<el-button style="margin-left: 15px;" type="primary" @click="searchRole">{{$t('common.searchBtn')}}</el-button>
						<el-button style="margin-left: 15px;" type="primary" @click="reset">{{$t('common.resetBtn')}}</el-button>
					</el-col>
					<el-col :span="24">
						<el-table v-loading="loadind1" ref="roletableList" :data="roletableList" border max-height="500" style="width: 100%" @selection-change="selectAddListChange">
							<el-table-column :selectable="selectableFun" type="selection" width="55"></el-table-column>
							<el-table-column prop="ruleType" :label="$t('common.ruleType')" show-overflow-tooltip></el-table-column>
							<el-table-column prop="subSystemName" :label="$t('common.subsysName')" show-overflow-tooltip> </el-table-column>
							<el-table-column prop="roleName" :label="$t('common.roleName')" show-overflow-tooltip> </el-table-column>
							<el-table-column prop="roleResources" :label="$t('common.mustResource')" show-overflow-tooltip> </el-table-column>
						</el-table>
						<el-pagination @size-change="pageSizeChange1" @current-change="handleCurrentChangePage1" :current-page="pagination1.pageNum" :page-sizes="[10,20, 50, 100, 200]" :page-size="pagination1.pageSize" layout="->,prev, pager, next, sizes,total" :total="pagination1.totalSize">
						</el-pagination>
					</el-col>
				</el-row>
				<p><span style="font-weight:bold;">{{$t('components.handleRole.step3')}}：</span>{{$t('components.handleRole.maintainDate')}} </p>
				<el-row>
					<el-col :span="24">
						<el-form-item :label="$t('common.startTm')+':'" class="is-required" :class="(showError && !roleForm.startTm)?'is-error':''">
							<el-date-picker @change="checkDateValid('startTm') " :picker-options="pickerOptions1" value-format="yyyy-MM-dd" v-model="roleForm.startTm" type="date" :placeholder="$t('common.selectDate')"> </el-date-picker><span class="desc">（{{$t('components.handleRole.completionStartTime')}}）</span>
							<div class="el-form-item__error" v-if="showError && !roleForm.startTm">
								{{$t('validateWornText.slectStartTm')}}
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('common.endTm')+':'" class="is-required" :class="(showError && !roleForm.endTm)?'is-error':''">
							<el-date-picker @change="checkDateValid('endTm') " :picker-options="pickerOptions1" value-format="yyyy-MM-dd" v-model="roleForm.endTm" type="date" :placeholder="$t('common.selectDate')"> </el-date-picker><span class="desc">（{{$t('components.handleRole.completionEndTime')}}）</span>
							<div class="el-form-item__error" v-if="showError && !roleForm.endTm">
								{{$t('validateWornText.slectEndTm')}}
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-row>
		<div slot="footer" class="dialog-footer">
			<el-button @click="$emit('exit') ">{{$t('common.giveUp')}}</el-button>
			<el-button type="primary" @click="save">{{$t('common.save')}}</el-button>
		</div>
	</el-dialog>
	<!-- 新增，删除，延期，预申请角色权限 -->
</template>

<script>
	import {
		Message,
		Notification,
		MessageBox,
		Loading
	} from 'element-ui'
	export default {
		name: 'handleRole',
		props: [
			'visible'
		],
		data() {
			return {
				show: false,
				roleForm: {
					userName: '',
					empName: '',
					positionName: '',
					orgName: '',
					byAccountId: '',
					systemName: '',
					systemId: '',
					subsysName: '',
					roleName: '',
					endTm: '',
					startTm: ''
				},
				pickerOptions1: {
					disabledDate(time) {
						return(time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000)
					}
				},
				rules: {
					userName: [{
						required: true,
						message: this.$t('validateWornText.selectByAccount'),
						trigger: 'change'
					}],
					subsysName: [{
						required: true,
						message: this.$t('validateWornText.selectSubsysName'),
						trigger: 'change'
					}]
				},
				roleNameOptions: [],
				subsysTemOptions: [],
				byAccountOptions: [],
				roletableList: [],
				pagination1: {
					totalSize: 0,
					pageSize: 10,
					pageNum: 1,
					totalPage: 0
				},
				title: '',
				loadind1: false,
				addSelectMultipleSelection: [],
				showError: false
			}
		},
		watch: {
			visible: 'visibleChange'
		},
		mounted() {},
		methods: {
			visibleChange(val) {
				this.show = val
				if(val) {
					this.byAccountOptionsFun('')
					this.getSubSystemList() // 获取子系统
					this.title = this.$t('components.handleRole.assignRole')
				}
			},
			checkDateValid(param) {
				this.showError = !((this.roleForm.startTm && this.roleForm.endTm))
				if(this.roleForm.startTm != '' && this.roleForm.endTm != '') {
					if(this.roleForm.startTm > this.roleForm.endTm) {
						this.$message({
							message: this.$t('common.conmareEndTimeTip'),
							type: 'warning'
						})
						this.roleForm[param] = ''
					}
				}
			},
			reset() { // 重置模态框数据
				this.$refs['roleForm'].resetFields() // 重置表单
				this.roleForm = {
					userName: '',
					empName: '',
					positionName: '',
					orgName: '',
					byAccountId: '',
					systemName: '',
					systemId: '',
					subsysName: '',
					roleName: '',
					endTm: '',
					startTm: ''
				}
				this.pagination1.pageNum = 1
				this.roletableList = []
				this.addSelectMultipleSelection = []
				this.roleNameOptions = []
				this.subsysTemOptions = []
				this.byAccountOptions = []
				this.showError = false
			},
			/* 搜索百源账号 */
			async byAccountOptionsFun(queryString) {
				this.byAccountOptions = await this.$byAccountOptionsFun(queryString)
			},
			handleSelectByForm(item) {
				this.roleForm.byAccountId = item.id
				this.searchEmpInfo(item.code)
				this.pagination1.totalSize = 0
				this.pagination1.pageNum = 1
				this.roletableList = []
			},
			searchEmpInfo(code) { // 根据百源账号id查员工信息
				var urlH = '/dev-basp-user/sysAccount/queryUserInfo/' + code
				this.$httpExt().get(urlH)
					.then((response) => {
						var body = response.result
						this.roleForm.empName = body.empName
						this.roleForm.positionName = body.positionName
						this.roleForm.orgName = body.orgName
					}, (response) => {
						Notification.error({
							title: this.$t('common.exception'),
							message: response.msg ? response.msg : this.$t('common.exceptionWornText')
						})
					})
			},
			/**
			 * @author：xmj
			 * @function:根据系统id获取子系统列表
			 */
			async getSubSystemList(val) {
				this.subsysTemOptions = await this.$getSubSystemList(val)
			},
			handleSelectSubsys(item) { // 选择子系统时查角色
				this.roleForm.subsysCode = item.value
				this.roleForm.roleName = ''
			},
			selectAddListChange(val) { // 角色列表勾选
				this.addSelectMultipleSelection = val
			},
			searchRole() { // 查询角色列表
				this.$refs['roleForm'].validate((valid) => {
					if(valid) {
						this.searchRoleList()
						// 根据子系统编号搜索角色
					} else {
						return false
					}
				})
			},
			searchRoleList() {
				var param = {
					pageSize: this.pagination1.pageSize,
					pageNum: this.pagination1.pageNum,
					byAccountId: this.roleForm.byAccountId,
					roleName: this.roleForm.roleName,
					subSystemCode: this.roleForm.subsysCode
				}
				var urlH = '/dev-basp-user/userRole/queryRuleRoleListRes'
				this.loadind1 = true
				this.$httpExt().post(urlH, param)
					.then((response) => {
						this.loadind1 = false
						var body = response.result
						this.roletableList = body.data
						this.pagination1.totalSize = body.totalSize
					}, (response) => {
						this.loadind1 = false
						Notification.error({
							title: this.$t('common.exception'),
							message: response.msg ? response.msg : this.$t('common.exceptionWornText')
						})
					})
			},
			// 搜索角色权限列表清单
			handleCurrentChangePage1(val) { // 角色列表分页
				this.pagination1.pageNum = val
				this.searchRole()
			},
			pageSizeChange1(val) { // 角色列表分页
				this.pagination1.pageNum = 1
				this.pagination1.pageSize = val
				this.searchRole()
			},
			save() {
				var that = this
				this.$refs['roleForm'].validate((valid) => {
					if(valid) {
						if(!that.roleForm.endTm || !that.roleForm.startTm) { // 未填写失效时间,预申请未填写开始时间
							that.showError = true
						} else if(that.addSelectMultipleSelection.length < 1) { // 未勾选角色
							MessageBox({
								message: this.$t('common.emptyTip'),
								confirmButtonText: this.$t('common.iknow')
							})
						} else { // 页面值校验通过
							that.$emit('roleHandleSave', that.roleForm, that.addSelectMultipleSelection)
						}
					} else {
						if(!that.roleForm.endTm) { // 未填写失效时间
							that.showError = true
						} else if(!that.roleForm.startTm) { // 预申请未填写开始时间
							that.showError = true
						}
						return false
					}
				})
			},
			closeDiolag() {
				this.reset()
				this.$emit('close')
			},
			selectableFun(value, row, column) {
				return true
			},
			formatter(row, column) { // 状态信息中表格展开项的code转为name
				switch(column.property) {
					case "accountFrom": // 资源状态
						for(var i = 0; i < this.userFromSysOptions.length; i++) {
							if(row.accountFrom == this.userFromSysOptions[i].value) {
								return this.userFromSysOptions[i].label
							}
						}
						return row.accountFrom
					default:
						return row[column.property];
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.handleDialog {
		min-width: 1100px;
		p {
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}
		.el-select {
			width: 100%;
		}
	}
</style>